<template>
  <view class="">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="账号设置" />
    <div class="setting-content">
      <div class="setting-padding">
        <!-- <van-cell title="头像" center>
          <template #right-icon>
            <img :src="info.avatar" alt="" class="user-img">
          </template>
        </van-cell>
        <van-cell title="昵称" is-link :value="info.username" /> -->
        <view class="menu_content_one">
          <view class="menu_three" @click="$ui.push('/pages/mine/setting/setpay')">
            <view class="menu_one_con">
              修改支付密码
            </view>
            <view class="menu_one_end">
            </view>
          </view>
          <view class="menu_three" @click="$ui.push('/pages/mine/setting/setpassword')">
            <view class="menu_one_con">
              修改登录密码
            </view>
            <view class="menu_one_end">
            </view>
          </view>
          <!-- #ifdef APP-PLUS -->
          <view class="menu_three" @click="getServe">
            <view class="menu_one_con">
              检查更新
            </view>
            <view class="menu_one_end">
            </view>
          </view>
          <!-- #endif -->
        </view>
      </div>
      <div class="div-sizing">
        <button @click="outLogin">
          <span>退出登录</span>
        </button>
      </div>
    </div>
  </view>
</template>

<script>
  import {
    checkVersion
  } from '@/api/index.js'
  export default {
    data() {
      return {
        info: {},
        version: '',
        isNew: false,
        isApp: false
      }
    },
    methods: {
      checkVer() {
        const vm = this

      },
      // 检查当前版本号
      getServe() {
        this.$ui.loading('加载中')
        const _this = this
        plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
          const oldVer = widgetInfo.version
          checkVersion().then(res => {
            uni.hideLoading()
            if (res.code == 1) {
              const newVer = res.data.app_v
              if (oldVer != newVer) {
                _this.$ui.show('提示', `是否更新版本为${newVer}`, true).then(res1 => {
                  if (res1.confirm) {
                    uni.showToast({
                      title: '发现新版本，后台静默下载，下载完自动重启',
                      icon: 'none'
                    })
                    uni.downloadFile({ //开始下载后端下发wgt包
                      url: res.data.app_wgt_url,
                      success: (downloadResult) => {
                        console.log(downloadResult);
                        if (downloadResult.statusCode) {
                          plus.runtime.install(downloadResult.tempFilePath, { //进行自动安装
                            force: false
                          }, function() {
                            uni.hideLoading()
                            plus.runtime.restart(); //安装成功后重启应用
                          }, function(e) {
                            uni.hideLoading()
                            console.error('install fail...');
                          });
                        } else {
                          uni.hideLoading()
                          uni.showToast({
                            title: downloadResult.errMsg,
                            icon: 'none'
                          })
                        }
                      },
                      fail(err) {
                        console.log(err, 123);
                        uni.showToast({
                          title: '下载失败',
                          icon: 'none'
                        })
                      },
                    });
                  }
                })
              } else {
                _this.$ui.toast('已是最新版本')
                console.log(111111);
              }
            }
          })
        })
      },
      // 获取用户信息
      get_info() {
        userIndex().then(res => {
          if (res.code === 1) {
            this.info = res.data.user
          }
        })
      },

      // 退出登录
      outLogin() {
        this.$ui.show('提示', '确认退出吗', true).then(res => {
          if (res.confirm) {
            this.$ui.remove('token')
            this.$ui.push('/pages/login/index', 'reLaunch')
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .setting {
    padding: 2rem 30rpx 30rpx;
    display: flex;

    .setting-content {
      flex: 1;
      overflow: hidden;
      border-radius: 10rpx;
      z-index: 2;
    }

    .setting-padding {
      // padding: 0 50rpx;
    }

    .van-cell {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #b7b7b7;
    }

    .user-img {
      width: 80rpx;
      height: 80rpx;
      background: #f5f5f5;
      border-radius: 50%;
    }

    .van-cell__right-icon {
      color: #b7b7b7;
    }

    .van-cell__value {
      font-size: 28rpx;
    }

    .vant-btn {
      // padding: 0 30rpx;
      margin: 180rpx 0;

      .van-button {
        // border-radius: 10rpx;
        // background: #7D7D7D;
      }

      .van-button__text {
        display: flex;
        align-items: center;
        justify-content: center;

        .out-img {
          width: 36rpx;
          height: 36rpx;
          margin-right: 10rpx;
        }
      }
    }

    .right-div {
      display: flex;
      align-items: center;
      color: #d1d1d1;

      .van-icon {
        color: #d1d1d1;
        font-size: 32rpx;
      }

      .badge {
        width: 12rpx;
        height: 12rpx;
        margin-right: 10rpx;
        display: inline-block;
        background: #ff0000;
        border-radius: 50%;
      }
    }
  }

  .menu_three {
    height: 72rpx;
    width: 100%;
    position: relative;

    .menu_one_start {
      position: absolute;
      top: 15rpx;
      left: 15rpx;
      width: 33rpx;
      height: 34rpx;
      background-image: url('@/static/mine/user/user_menu3.png');
      background-size: 100% 100%;
      background-size: cover;
      background-repeat: no-repeat;
    }

    .menu_one_con {
      // position: absolute;
      // top: 19rpx;
      // left: 106rpx;
      // width: 118rpx;
      // height: 28rpx;
      // background-image: url('@/static/mine/user/wodeqianbao.png');
      // background-size: 100% 100%;
      // background-size: cover;
      // background-repeat: no-repeat;
      position: absolute;
      top: 15rpx;
      left: 26rpx;
      height: 28rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 540;
      color: #666666;
    }

    .menu_one_end {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      width: 12rpx;
      height: 22rpx;
      background-image: url('@/static/mine/user/user_menu_right.png');
      background-size: 100% 100%;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }

  .menu_content_one {
    margin-bottom: 30rpx;
    width: 100%;
    min-height: 176rpx;
    background: #FFFFFF;
    margin-top: 20rpx;
  }
</style>
